<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增面授课程</span>
                </div>
                <div class="add-form-container">
                    <el-form ref="form" :model="form" label-width="120px" class="add-form">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="课程名称">
                                    <el-input v-model="form.name" placeholder="请输入课程名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="课序">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="第一讲" value="shanghai"></el-option>
                                        <el-option label="第二讲" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row class="sub-name">
                            <el-col :span="16">
                                <el-form-item label="所属班级">
                                    <el-input v-model="form.name" placeholder="所属班级"></el-input>
                                    <a class="link" @click="chooseClass()">选择班级</a>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                                <span class='teacher-span'>讲师：张楚岚</span>
                                <span>助教：张蓝心</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="开课日期">
                                    <el-col :span="11">
                                        <el-form-item prop="date1">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                                style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="line date-line" :span="2">-</el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date2">
                                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"
                                                format="HH:mm" value-format="HH:mm">
                                            </el-time-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">
                                <span class="time-ins">时长</span>
                                <el-input class="min-input"></el-input>
                                <span>分钟</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="状态">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="1班" value="shanghai"></el-option>
                                        <el-option label="2班" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">确定</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
export default {
    name: 'home',
    data() {
        return {
            headerList: ['直播', '面授', '新增面授课程'],
            openeds: ['b5', 'b5-1'],
            activeTab: 'Show',
            form: {
                name: '',
                phone: '15694267318',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        chooseClass() {
            this.$router.push({
                path: '/chooseClass' //跳转的路径
            })
        }
    },
    components: {
        Header,
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .sub-name {
        position: relative;

        .link {
            position: absolute;
            top: 1px;
            left: 20px;
            text-decoration: none;
            color: rgba(85, 168, 253, 1);
            cursor: pointer;
        }

        input {
            padding-left: 84px;
        }
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: 800px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
    }

    .temp-contain {
        .flex(row, space-between, center, nowrap);

        img {
            margin-right: 18px;
            width: 120px;

        }
    }

    .class-contain {
        // .flex(row, space-between, center, nowrap);
    }

    .teacher-contain {
        line-height: 40px;
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(96, 98, 102, 1);
    }

    .teacher-span {
        margin: 0px 30px;
    }

    .time-contain {
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(96, 98, 102, 1);
    }

    .min-input {
        width: 80px;
        height: 40px;
        margin-right: 10px;
    }

    .time-ins {
        margin-left: 30px;
        margin-right: 10px;

    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    .sub-name {
        input {
            padding-left: 84px !important;
        }
    }

    // 表单label
    .el-form {
        /*.el-form-item__label{*/
        /*    font-size:14px!important;*/
        /*    font-family:PingFang-SC!important;*/
        /*    font-weight:400!important;*/
        /*    color:rgba(28,28,28,1)!important;*/
        /*}*/
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
